<template>
  <div>
    <el-table :data="processedData" style="width: 100%">
      <el-table-column label="ID" prop="Id" :min-width="40"></el-table-column>
      <el-table-column
        label="名称"
        prop="name"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="cost"
        :min-width="50"
      ></el-table-column>
      <el-table-column
        label="生产厂家"
        prop="producers"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="生产厂家电话"
        prop="phone"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="生产厂家代码"
        prop="producers_id"
        :min-width="50"
      ></el-table-column>
      <el-table-column
        label="品类"
        prop="cate_id"
        :min-width="60"
      ></el-table-column>
      <el-table-column label="Image">
        <template slot-scope="scope">
          <el-image
            style="width: 120px; height: 120px"
            :src="scope.row.image"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import GoodForm from "./GoodForm.vue";
export default {
  name: "GoodsTable",
  components: {
    GoodForm,
  },
  props: {
    dataObject: {
      type: Array, // 确保正确指定数据类型为对象
      required: true,
    },
  },
  data() {
    return {
      processedData: [],
      newProduct: [],
      dialogVisible: {}, // 使用对象来存储每个行的对话框状态
    };
  },
  methods: {
    closeDialog(index) {
      this.$set(this.dialogVisible, index, false);
    },
    openDialog(index) {
      this.$set(this.dialogVisible, index, true); // 使用 Vue.set 来确保视图更新
    },
    processData() {
      let stringToDelete = "uploads/";
      let baseUrl = "http://127.0.0.1:3002/";
      const newArr = this.dataObject.map((item) => {
        return {
          ...item,
          image: baseUrl + item.img.replace(stringToDelete, ""), // 处理图片路径
        };
      });
      return newArr;
    },
  },
  created() {
    this.processedData = this.processData();
  },
};
</script>
  
  <style>
/* 自定义按钮样式 */
.el-button {
  margin-right: 10px;
}
</style>